<template>
  <div class="cesium">
    <el-select class="m-2 modelSelect" v-model="value" @change="changeSelect">
      <el-option
        v-for="(item, i) in options"
        :key="item.url"
        :label="item.text"
        :value="i"
      >
      </el-option>
    </el-select>
    <div id="cesiumContainer"></div>
  </div>
</template>

<script lang="ts" setup>
import * as Cesium from "cesium";
import { onMounted, ref } from "vue";
const value = ref("Aircraft");
const cesiumToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzMzUxYjczMi1lYzhhLTQzMDQtOTIzOC02ZjlhM2FhYmI2MTIiLCJpZCI6ODM3NTUsImlhdCI6MTY0NTc3MjUzMH0.spfVO5Y_wP6SFfr5ha6rWlbK6aWVDsGc9NsRVmJ53d0";
const viewer = ref<Cesium.Viewer | undefined | null>(null);
const options = [
  {
    text: "Aircraft",
    url: "/SampleData/models/CesiumAir/Cesium_Air.glb",
    height: 5000.0,
  },
  {
    text: "Drone",
    url: "/SampleData/models/CesiumDrone/CesiumDrone.glb",
    height: 150.0,
  },
  {
    text: "Ground Vehicle",
    url: "/SampleData/models/GroundVehicle/GroundVehicle.glb",
    height: 0,
  },
  {
    text: "Hot Air Balloon",
    url: "/SampleData/models/CesiumBalloon/CesiumBalloon.glb",
    height: 1000.0,
  },
  {
    text: "Milk Truck",
    url: "/SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
    height: 0,
  },
  {
    text: "Skinned Character",
    url: "/SampleData/models/CesiumMan/Cesium_Man.glb",
    height: 0,
  },
  {
    text: "Draco Compressed Model",
    url: "/SampleData/models/DracoCompressed/CesiumMilkTruck.gltf",
    height: 0,
  },
  {
    text: "KTX2 Compressed Balloon",
    url: "/SampleData/models/CesiumBalloonKTX2/CesiumBalloonKTX2.glb",
    height: 1000.0,
  },
];

const init = () => {
  Cesium.Ion.defaultAccessToken = cesiumToken;
  viewer.value = new Cesium.Viewer("cesiumContainer", {
    animation: false, // 动画小组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: false, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: true, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });

  // 隐藏logo
  (viewer.value.cesiumWidget.creditContainer as HTMLElement).style.display =
    "none";
};

const createModel = (val: number) => {
  let { url, height, text } = options[val];
  console.log(url, viewer.value);
  if (viewer.value) {
    viewer.value.entities.removeAll();

    const position = Cesium.Cartesian3.fromDegrees(
      -123.0744619,
      44.0503706,
      height
    );
    const heading = Cesium.Math.toRadians(135);
    const pitch = 0;
    const roll = 0;
    const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(
      position,
      hpr
    );

    const entity = viewer.value.entities.add({
      name: text,
      position: position,
      orientation: new Cesium.ConstantProperty(orientation),
      model: {
        uri: url,
        minimumPixelSize: 128,
        maximumScale: 20000,
      },
    });
    viewer.value.trackedEntity = entity;
  }
};

const changeSelect = (val: number) => {
  // let { url, height } = options[val];
  createModel(val);
};

onMounted(() => {
  init();
  changeSelect(0);
});
</script>

<style scoped lang="scss">
.cesium {
  height: 100%;
  position: relative;
  .modelSelect {
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 2;
  }
  #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
}
</style>
